<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>{{list.length}}</strong></span>
    <ul @click="changeTask" class="filters">
      <li>
        <a @click="isSel='all'" :class="{selected:isSel=='all'}" href="javascript:;" >全部</a>
      </li>
      <li>
        <a @click="isSel='no'" :class="{selected:isSel=='no'}" href="javascript:;">未完成</a>
      </li>
      <li>
        <a @click="isSel='yes'" :class="{selected:isSel=='yes'}" href="javascript:;" >已完成</a>
      </li>
    </ul>
    <button class="clear-completed" >清除已完成</button>
  </footer>
</template>

<script>
export default {
  data(){
    return {
      isSel:'all'
    }
  },
  methods:{
    changeTask(){
      this.$emit('changeTask',this.isSel)
    }
  },
  props:['list']
}
</script>